<template>
    <myDisplayWrap breadcrumbs="基础信息">
        <a-row class="userBox">
            <div class="titleBar">我的关注</div>
            <div class="topBox">
                <template v-for="item in tabList">
                    <div  class="btn-item"
                        :class="{ topButtonActive: currentTab == item.dataSource }" @click="changeTab(item)">
                        {{ item.name }}
                    </div>
                </template>
            </div>
            <a-form :form="form">
                <a-row class="collectionOperate" style="margin-left:-30px;">
                    <a-col :span="8">
                        <a-form-item label="商品名称" :label-col="{ xxl: 7, xl: 8 }" :wrapperCol="{ xxl: 17, xl: 16 }">
                            <a-input v-decorator="['goodsName']" placeholder="请输入商品名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="16" style="padding-top: 6px; padding-right:22px;" class="TAR">
                        <a-button type="primary" :ghost="true" @click="loadData(true)">
                            <a-icon type="search" />查询
                        </a-button>
                        <a-button @click="resetBtn">
                            <a-icon type="reload" />重置
                        </a-button>
                    </a-col>
                </a-row>
            </a-form>
            <a-row class="collectionOperate">
                <a-col :span="8">
                    <a-popconfirm title="是否确认删除？" ok-text="确定" cancel-text="取消" @confirm="deleteListConfirm">
                        <a-button>批量删除</a-button>
                    </a-popconfirm>
                </a-col>

            </a-row>
            <div style="margin-top:10px;">
                <a-table :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    :columns="columns" :data-source="collectionGoods" bordered :row-key="rowKeyFunction"
                    :loading="tableLoading">

                    <div slot="name" slot-scope="text" style="display: flex;align-items: flex-start;">
                        <div style="position: relative;margin-right: 15px">
                            <img :src="text.goodsImage" width="60px" height="60px" />

                        </div>
                        <a-tooltip style="flex: 1;" :title="text.goodsName">
                            <div
                                style="display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;">
                                <a v-if="text.goodsStatus == 1" @click="goodsDetail(text.goodsId)">{{ text.goodsName }}</a>
                                <div v-else>{{ text.goodsName }}</div>
                            </div>
                        </a-tooltip>
                    </div>

                    <span slot="price" slot-scope="text">{{ text.goodsPrice | priceFilter }}</span>
                    <template slot="operate" slot-scope="text">
                        <a-popconfirm v-if="collectionGoods.length" title="确认删除？" @confirm="() => deleteOne(text.id)">
                            <div><a class="primary_btn_color">删除</a></div>
                        </a-popconfirm>
                        <div>
                            <a @click="addCart(text.goodsId, text.goodsPrice)" class="primary_btn_color"
                                v-if="permOPerateObject.permValid('api.order.cart')">加入购物车</a>

                        </div>
                    </template>
                </a-table>
                <a-row style="margin-top:10px;">
                    <a-col :span="7">
                        <div>共 {{ total }} 条记录 第 {{ pageInfo.page }} / {{ Math.ceil(total / pageInfo.limit) }} 页</div>
                    </a-col>
                    <a-col :span="17">
                        <a-pagination style="float:right;" :current="pageInfo.page" :pageSizeOptions="pageSizeOptions"
                            :total="total" showSizeChanger showQuickJumper :pageSize="pageInfo.limit"
                            @showSizeChange="onShowSizeChange" @change="pageChange">
                            <template slot="buildOptionText" slot-scope="props">
                                <span>{{ props.value }}条/页</span>
                            </template>
                        </a-pagination>
                    </a-col>
                </a-row>
            </div>
        </a-row>
    </myDisplayWrap>
</template>
  
<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import moment from 'moment'

export default {
    components: {
        myDisplayWrap
    },
    data() {
        return {
            //表格加载圈
            tableLoading: false,
            timeArr: [
                moment(moment().startOf('month'), 'YYYY-MM-DD'),
                moment(moment().endOf('month'), 'YYYY-MM-DD')
            ],
            //选中地址
            ar: "",
            columns: [
                {
                    title: '供应商名称',
                    dataIndex: 'modifyTime',
                    align: 'center',
                    width: "150px"
                },
                {
                    title: '经营品类',
                    dataIndex: '',
                    align: 'center',
                    scopedSlots: { customRender: 'name' },
                    width: "250px"
                },
                {
                    title: '注册资金/万元',
                    dataIndex: 'goodsCode',
                    align: 'center'
                },
                {
                    title: '注册地',
                    dataIndex: '',
                    align: 'center',
                    scopedSlots: { customRender: 'price' }
                },
                {
                    title: '操作',
                    dataIndex: '',
                    scopedSlots: { customRender: 'operate' },
                    align: 'center'
                },
            ],
            //商品集合
            collectionGoods: [],
            //选中商品集合
            selectedRowKeys: [],
            selectedRows: [],
            pageSizeOptions: ['5', '10', '15', '20'],
            total: 0,//商品总数
            pageInfo: {
                limit: 5,
                page: 1
            },
            //查询
            queryParam: {
                page: 1,
                limit: 5,
                areaId: ''
            },
            areaId: '',
            areaName: '',
            addressList: [],
            backendMenuLength: '',
            form: this.$form.createForm(this, { name: "goodsHistoryList" }),
            tabList: [{
                dataSource: '1',
                name :'产品'
            },{
                dataSource: '2',
                name :'供应商'
            },{
                dataSource: '3',
                name :'活动'
            }],
            currentTab: "1"
        }
    },
    mounted() {

    },
    methods: {
        loadData() { },
        deleteListConfirm() { },
    },
    watch: {

    }
}
</script>
  
<style lang="scss" scoped>
.topBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    /*justify-content: space-around;*/
    .btn-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 30px;
      margin-right: 30px;
      margin-bottom: 5px;
      padding: 0 20px;
      font-size: 14px;
      color: #4e4e4e;
      border: #cccc 1px solid;
      border-radius: 18px;
      cursor: pointer;

      &:hover {
        color: var(--antd-wave-shadow-color);
        border-color: var(--antd-wave-shadow-color);
      }

      &:last-child {
        margin-right: 0;
      }

      &.topButtonActive {
        background-color: var(--antd-wave-shadow-color);
        color: white;
        border-color: var(--antd-wave-shadow-color);
      }
    }
  }


.userBox {
    padding: 0 24px;
    border-left: 4px solid #cccccc;
    margin-left: -1px;
    min-height: 650px;
}

.titleBar {
    width: 100%;
    height: 50px;
    line-height: 30px;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-bottom: 1px dashed #ccc;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}</style>
  